/**
 * @class tuan.view.ThongKeView
 * @extends extendsClass
 * Description
 */
 Ext.define('tuan.view.donhang.ThongKeView', {
    extend: 'Ext.tab.Panel',
    xtype : 'tab-thong-ke-donhang',
    itemId : 'thongkeview_id',
    items : [
        {
            title : 'Tình hình doanh thu theo tháng',
            xtype : 'panel',
            layout : 'hbox',
            height : 600,
            items : [
                {
                    xtype : 'panel',
                    flex :3,
                    title : 'Thống kê sức mua theo tháng',
                    items : [
                        {
                            xtype : 'form',
                            id : 'form_thongketheongaythang',
                            items : [
                                {
                                    layout : 'hbox',
                                    xtype: "fieldset",
                                    title: "Chọn thời gian",
                                    defaults: { xtype: "textfield",margin : 10},
                                    items: [
                                        { 
                                            name : 'thang',
                                            fieldLabel : 'Chọn tháng',
                                            allowBlank : false,
                                            xtype: 'numberfield',
                                            msgTarget : "side", 
                                            value : ((new Date()).getMonth())+1
                                        },
                                        { 
                                            name: "nam",
                                            allowBlank : false,
                                            fieldLabel : 'Nhập năm',
                                            value : (new Date()).getFullYear()
                                        },
                                        { 
                                            xtype : "button", 
                                            text: "Thống kê",
                                            // id : 'submit_form_thongketheongaythang'
                                            itemId : 'submit_form_thongketheongaythang'
                                        },
                                        // { 
                                        //     xtype : "button", 
                                        //     text: "Reload",
                                        //     id : 'reload_form_thongketheongaythang'
                                        // }
                                    ]
                                }
                            ]
                        },
                        {  
                            layout : 'vbox',
                            items: [
                                
                                {
                                    xtype : 'panel',
                                    id : 'thongke_xtemplate_ngaythang',
                                    html : 'Ngày 27/7/2014',
                                    border : false,
                                    margin : '0 0 0 100'
                                },
                                {
                                    id : 'tab_tinh_hinh_doanh_thu',
                                    margin : 20
                                }
                            ]
                          
                        }                        
                    ]
                },
                // {
                //     xtype : 'panel',
                //     title : 'Mua nhiều nhất',
                //     flex :2,
                // }
            ]
        },
        {
          title : 'Thống kê sản phẩm',
          itemId : 'thong_ke_san_pham_DonHang_id',
          border : false,
          items : [
          {
                xtype : 'form',
                items : [
                    {
                        layout : 'hbox',
                        xtype: "fieldset",
                        title: "Chọn thời gian",
                        defaults: { xtype: "textfield",margin : 10},
                        items: [
                            { 
                                name : 'thang',
                                fieldLabel : 'Chọn tháng',
                                allowBlank : false,
                                xtype: 'numberfield',
                                msgTarget : "side", 
                                value : ((new Date()).getMonth())+1
                            },
                            { 
                                name: "nam",
                                xtype: 'numberfield',
                                allowBlank : false,
                                fieldLabel : 'Nhập năm',
                                value : (new Date()).getFullYear()
                            },
                            { 
                                xtype : "button", 
                                text: "Thống kê",
                                id : 'submitThongKeSanPhamTop'
                            },
                        ]
                    }
                ]
            },
            {
                xtype : 'panel',
                border : false,
                margin : '0 0 10 50',
                itemId : 'panel_thongkesanpham',
                html : '<h2>Top danh sách sản phẩm được mua nhiều nhất</h2>'
            },
            {
                xtype : 'panel',
                border : false,
                margin : 20,
                itemId : 'wapper_thongkesanpham_id'
            }
          ]
        },
    ]
});

 //define chart
 /**
  * @class tuan.donhang.ThongKeView
  * @extends extendsClass
  * Description
  */
 Ext.define('thongketheothang', {
     extend: 'Ext.chart.Chart',
     xtype : 'thongketheothang_xtype',
     animate: true,
     shadow: true,
     // insetPadding: 10,
     store: null,
     height : 310,
     width :880,
     border : false,
     axes : [
        {
            title : "Tổng số tiền - vnđ",
            type : 'Numeric',
            position : 'left',
            fields : ['thanhtien'],
            minimum : 0,
            grid: true,
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0'),
                font: '10px Arial'
            }
            // maximum : 10000000
        },
        {
            title : 'Ngày trong tháng',
            type : 'Category',
            position : 'bottom',
            fields : ['ngay'],
            label : {
                renderer : function(value){
                    return value
                }
            }
        }
     ],
     series : [
        {
            type : 'line',
            xField : 'ngay',
            yField : 'thanhtien',
            title : 'Số tiền',
            smooth: true,
            tips: {
                trackMouse: true,
                width: 80,
                height: 40,
                renderer: function(storeItem, item) {
                    this.setTitle('Ngày '+storeItem.get('ngay')+'/'+storeItem.get('thang'));
                    this.update(storeItem.get('thanhtien'));
                }
            },
             style: {
                    fill: '#38B8BF',
                    stroke: '#38B8BF',
                    'stroke-width': 3
            },
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0,
                fill: '#38B8BF',
                stroke: '#38B8BF'
            },
            highlight: {
                size: 5,
                radius: 7
            },
        },               

     ],
     legend : {
        position : "right",
        labelColor : "#00F"
    }
 });

/**
 * @class thongThongKeView
 * @extends extendsClass
 * Description
 */
Ext.define('ThongKeSanPhamTop', {
    extend: 'Ext.chart.Chart',
    xtype : 'thongkesanphamtop_xtype',
    animate: true,
    shadow: true,
    insetPadding: 10,
    store: null,
    height : 300,
    width :880,
    border : false,
    axes : [
        {
            title : "Tổng số tiền",
            type : 'Numeric',
            position : 'left',
            fields : ['total'],
            minimum : 0,
            grid: true,
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0'),
                font: '10px Arial'
            }
        },
        {
            title : 'Tên sản phẩm',
            type : 'Category',
            position : 'bottom',
            fields : ['product_name'],
        }
     ],
     series : [
        {
            type : 'column',
            xField : 'product_name',
            yField : 'total',
            highlight: true,
            smooth: true,
            tips: {
                trackMouse: true,
                width: 100,
                height: 60,
                renderer: function(storeItem, item) {
                    this.setTitle('Số lần được mua');
                    this.update('Số lân '+storeItem.get('solanmua')+'<br/> Total '+ storeItem.get('total')+' đ');
                }
            },
            label: {
              display: 'insideEnd',
              'text-anchor': 'middle',
                field: 'solanmua',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
        },                      
     ],
});